<!--
+----------------------------------------------------------------------
| 列表页实例模板，Ctrl+A 可直接复制以下代码使用
+----------------------------------------------------------------------
-->
<form class="page-list-form">

    <div class="layui-collapse page-tips">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">温馨提示</h2>
            <div class="layui-colla-content">
                <p>此页面为后台数据管理标准模板，您可以直接复制使用修改</p>
            </div>
        </div>
    </div>
    <div class="page-toolbar">
        <div class="layui-btn-group fl">

            <a  class="layui-btn layui-btn-primary" onclick="save()"><i class="aicon ai-tianjia"></i>提交更新数据</a>

        </div>

    </div>
    <style>
        .container-fluid {
            padding: 20px;
        }
        .box {
            margin-bottom: 20px;
            float: left;
            width: 220px;
        }
        .ui-tree td {border: none;}
        .ui-tree .indent-group {
            background: url(__ADMIN_JS__/jquery-tree-0.0.1/jquery-tree-0.0.1/images/lock.gif) center center no-repeat;
        }
        #treeContainer {height:300px; position:relative;}
        .ui-tree {width:230px; padding:10px; height:auto;border:1px solid gray;background-color:#eee;margin-top:20px; position: absolute}
        .ui-tree tr:first-child td {border-top: none;}
        .ui-tree td .indent-span:first-child {display: none;}
    </style>
    <script src="__ADMIN_JS__/jquery.min.js"></script>
    <script src="__ADMIN_JS__/jquery-tree-0.0.1/jquery-tree.js"></script>
    <link rel="stylesheet" href="__ADMIN_JS__/jquery-tree-0.0.1/jquery-tree.css">
    <script src="__ADMIN_JS__/jquery-wookmark/wookmark.min.js"></script>
    <div id="treeContainer"></div>
    <script>
        $(function(){
            $.ajax({
                url: "{:url('admin/Member/getData')}",
                type: "GET",
                dataType: "json",
                success: function(data) {
                    data = $.tree('handleData', [data, {
                        id: "id",
                        name: "nav_name",
                        pid: "pid"
                    }, ['status']]);

                    // 获取默认选中项
                    var accessIds = [];
                    $.ajax({
                        url: "{:url('admin/Member/getCheck')}"+'?id={$id}',
                        dataType: 'json',
                        async: false,
                        success: function (result) {

                                accessIds = result;
                         }
                    });

                    data.forEach(function(value) {
                        var div = document.createElement('div');
                        $('#treeContainer')[0].appendChild(div);
                        $.tree('showData', [
                            div,
                            [value],
                            ['status'],
                            '',
                            {'click': function(v, ele) {
                                $(ele).prev('input[type="checkbox"]').click();
                            }},
                            '',
                            1,
                            accessIds
                        ]);
                        $.tree('openTree', [div]);
                    });
                    $('.ui-tree td[status="1"]>span.indent-group').css('background', 'url("__ADMIN_JS__/jquery-tree-0.0.1/jquery-tree-0.0.1/images/exit.gif")');



                    // *****************
                    // * 瀑布流
                    // *****************
                    var wookmark = new Wookmark('#treeContainer', {
                        offset: 2, // Optional, the distance between grid items
                        itemWidth: 250, // Optional, the width of a grid item
        //                        comparator: comparatorIsStamped, // Used to sort the items
                        direction: 'left', // Set this to 'right' if you want to stamp the 'stamped-first' item to the right
                        offset: 10,
                    });

                },
            });





        });
        function save() {
            var values = [];
            $('#treeContainer').find('input[type="checkbox"]').each(function() {
                if (this.checked) {
                    values.push(this.value);
                }
            });

            $.ajax({
                url: "{:url('admin/member/save')}",
                type: 'POST',
                data: {
                    uid: {$id},
                    values: values,
                },
                dataType: 'json',
                success: function (result) {
                   if (result.error === 0){
                       layer.msg(result.message);
                   }
                }
            });

        }


    </script>
</form>
